/**
* 功能描述: 添加表格边框和页头页脚
* @author 崔孝楠
* @date 2022/10/8 18:21
* @version 1.0
*/
<template>
  <span>边框和页头页脚</span>
  <div class="yw-table yw-table-bordered">
    <div class="yw-table-title">Header</div>
    <div class="yw-table-container">
      <div class="yw-table-content">
        <table style="table-layout: auto;">
          <!-- 设置列的width -->
          <colgroup>
            <col style="width: 20%;">
            <col style="width: 20%;">
          </colgroup>
          <!-- 表头 -->
          <thead class="yw-table-thead">
          <tr>
            <th class="yw-table-cell" colstart="0" colend="0">
              Name
            </th>
            <th class="yw-table-cell" colstart="1" colend="1">
              Gender
            </th>
            <th class="yw-table-cell" colstart="2" colend="2">
              Email
            </th>
          </tr>
          </thead>
          <tbody class="yw-table-tbody">
          <tr data-row-key="1" class="yw-table-row">
            <td class="yw-table-cell">
              <a>John Brown</a>
            </td>
            <td class="yw-table-cell">
              Male
            </td>
            <td class="yw-table-cell">
              amber@123
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="yw-table-footer">Footer</div>
  </div>
</template>

<script>
export default {
  name: "tableWithHeaderAndFooter"
}
</script>

<style scoped>

</style>
